<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        #imglist{
            width: 98%;
            padding: 10px;
            border: 3px solid #0a0;
        }
        #imglist img{
            width: 200px;
            height: 100px;
        }
        #imglist img.selected{
            border: 5px solid #f00;
            width: 190px;
            height: 90px;
        }
    </style>
</head>
<body>
    <h1>节点操作</h1>


    <button onclick="deleteImg()">删除选定的图片</button>
    <button onclick="replaceImg()">替换选定的图片</button>

    <button onclick="appendImg()">追加图片</button>
    <button onclick="insertImg()">指定位置插入图片</button>

    <button onclick="createImg()"> 创建图片 并追加到imglist中</button>

    <button onclick="cloneImg()">克隆图片集合 并追加到页面之中</button>
    <hr>
    
    <div id="imglist">
        <img src="../imgs/Meinv001.jpg">
        <img src="../imgs/Meinv002.jpg" title="pic2" id="pic">
        <img src="../imgs/Meinv003.jpg">
        <img src="../imgs/Meinv004.jpg">
        <img src="../imgs/Meinv005.jpg">
        <img src="../imgs/Meinv006.jpg">
        <img src="../imgs/Meinv007.jpg">
        <img src="../imgs/Meinv008.jpg">
        <img src="../imgs/Meinv009.jpg">
        <img src="../imgs/Meinv010.jpg">
        <img src="../imgs/Meinv011.jpg">
        <img src="../imgs/Meinv012.jpg">
        <img src="../imgs/Meinv013.jpg">
        <img src="../imgs/Meinv014.jpg">
        <img src="../imgs/Meinv015.jpg">
    </div>

    <hr>
    <img src="../imgs/Meinv018.jpg" width="200" id="myimg">

    

    <script>
        // HTML DOM
        pic.title = '换换';

        // XML DOM
        pic.setAttribute('title', '静静');
        // XML DOM
        var node = document.createAttribute('title');
        node.nodeValue = '沙沙';
        // console.dir(node);
        pic.setAttributeNode(node);
        
        pic.setAttribute('data-heheda', '我也想代码减一遍');

        // 选定图片
        var imgs = imglist.children;
        // console.log(imgs);
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function(){
                if (this.className == '') {
                    this.className = 'selected';
                } else {
                    this.className = '';
                }
            }
        }


        // 删除选定的图片
        function deleteImg() {
            for (var i = 0; i < imgs.length; i++) {
                if (imgs[i].className == 'selected') {
                    imglist.removeChild(imgs[i]);
                    i--; // 解决
                }
            }
        }
    
        // 替换选定的图片
        function replaceImg() {
            for (var i = 0; i < imgs.length; i++) {
                if (imgs[i].className == 'selected') {
                    imglist.replaceChild(myimg.cloneNode(true), imgs[i]);
                    // 重复的ID节点删掉    删除属性节点
                    imgs[i].removeAttribute('id');
                }
            }
        }

        // appendChild(node)    追加
        function appendImg(){
            imglist.appendChild(myimg);
        }
        // insertBefore(new_node, old_node)   指定位置插入 之前
        function insertImg() {
            imglist.insertBefore(myimg, imgs[4]);
        }

        // 创建并追加图片
        function createImg() {
            var img = document.createElement('img');
            img.src = '../imgs/Meinv017.jpg';
            // console.log(img);
             imglist.appendChild(img);
        }

        // 克隆节点
        function cloneImg() {
            var ss = imglist.cloneNode(true); // 所有 子子孙孙
            // console.log(ss);
            imglist.parentNode.appendChild(ss);
        }


    </script>
</body>
</html>